說到檔案互相引用，我們也有相對應的規範，除了撰寫上要避免 circular import 外，對於命名與位置也有要求。

不共用 export default 跟 export const

一開始我們會為了方便而在同一個檔案裡面同時使用 export default 跟 export const，像是這樣：

// RedisClinet
export const createClient = () => {};
class RedisClient {}
export default RedisClient;

然而，這樣衍生的問題是我們很難在程式碼裡面找到同一個檔案到底有 export 哪些項目，因此若是真的有需要在 export default 的情境還要 export 其他項目時，則是採用 js 的 everything is object 的特性，加入到 export default 的物件裡面來讓外部進行使用。

// RedisClinet
const createClient = () => {};
class RedisClient {}
RedisClient.createClient = createClient;
export default RedisClient;

外部使用方式

import RedisClient from "../clients/RedisClient";
RedisClient.createClient();

import default

許多套件都有 export default 的設計，但是有些套件是大寫，有些是小寫，而 import default module 的時候命名若是隨便取的話，就很容易 import 到相同的套件導致載入過多不不要的資源，因此我們 import 時根據「套件名稱的大小寫」決定 import 的大小寫命名。

import axios from "axios"; // 不可使用 import Axios from 'axios'
import RedisClient from "RedisClient"; // 不可使用 import redisClient from 'RedisClient'

事實上 VScode 的 auto import 好像也是遵循著 default import 直接使用檔案名稱的方式，所以如果是使用 auto import 的話就不會有這個問題。

index 只能拿來索引

在早期，我們會將實作放在 index 的檔案，並且引用同一個資料夾的檔案進行開發：

pages/
    HomePage/
        index.jsx
        HomePageBanner.jsx
        HomePageFooter.jsx
        HomePageMainSection.jsx

// pages/HomePage/index.jsx
import HomePageBanner from "./HomePageBanner";
import HomePageFooter from "./HomePageFooter";
import HomePageMainSection from "./HomePageMainSection";
const HomePage = () => {
  return (
    <div>
      <HomePageBanner />
      <HomePageMainSection />
      <HomePageFooter />
    </div>
  );
};
export default HomePage;

然後外部直接引用這個資料夾即可

import HomePage from "./pages/HomePage";
const App = () => {
  return <HomePage />;
};
export default App;

但是我們發現完全誤用了 index 的方式，index 是用來索引的！並不是用來偷懶放入開發的程式碼，這樣的開發方式會導致我們在找 HomePage 的問題時會一時間想不起來要在 index 裡面尋找，導致 bug 尋找上多了不少時間，因此我們規定 index 僅能用來 import 跟 export，不准進行額外開發，上述情況調整成：

pages/
    HomePage/
        index.js
        HomePage.jsx
        HomePageBanner.jsx
        HomePageFooter.jsx
        HomePageMainSection.jsx

// index.js 注意這邊變成 js，因為他已經不是元件了
import HomePage from "./HomePage";
import HomePageBanner from "./HomePageBanner";
HomePage.banner = HomePageBanner; // 視情況加入，大部分情況是不需要的
export { HomePageBanner }; // 有些人會這樣寫，依照上段所言，我們會避免此寫法
export default HomePage;

如果是 utils 沒有 default export 的話則是像這樣全部用 export const 的方式即可

utils/
    index.js
    converters.js
    dates.js

// index.js
import converters from "./converters";
import dates from "./dates";
export { converters, dates };

其他

class 與元件一律使用 export default 的模式